<template>
  <div class="authCode">
    <div class="head-portrait">
      <img src="../assets/person.jpg" alt="">
    </div>
    <div class="user">
      <div class="userName">
       <p>{{telNumber}}</p>
      </div>
      <div class="pas">
        <input type="text" v-model.trim="iptCode"
               placeholder="请输入验证码">
        <div :class="{'active':clock<1}" class="clock">
          <span @click="retryFn">重新发送</span>
          <div>
            <span v-if="clock>0">({{clock}})</span>
          </div>
        </div>
      </div>
      <div class="pas">
        <input type="password"
               v-model.trim="iptPas"
               placeholder="请输入密码">
      </div>
      <div class="enter-ipt">
        <span :class="{'active':iptCom}" @click="nextFn">下一步</span>
      </div>
      <div class="login">
        <p>遇到问题？您可以<router-link tag="span" to="/register/ringUp">联系客服</router-link></p>
      </div>
    </div>
    <!--弹框-->
    <message :theme=messageTheme :message.sync="messageShow" >
      <span>{{cancelText}}</span>
    </message>
  </div>
</template>

<script>
  export default {
    name: "authCode",
    data(){
      return{
        telNumber:null,
        timer:null,
        iptCode:'',
        iptPas:'',
        code:null,
        keyboardShow:false,
        clock:19,
        messageTheme:0,
        cancelText:'验证码或密码输入错误',
        passwordActive:false,
        codeActive:false,
        messageShow:false
      }
    },
    watch: {
      iptPas() {
        (this.iptPas.length > 5 && this.iptPas.length < 16 )? this.passwordActive = true : this.passwordActive = false;
      },
      iptCode(){
        this.iptCode.length>3?this.codeActive=true:this.codeActive=false;
      }
    },
    computed:{
      iptCom(){
        if(this.passwordActive && this.codeActive)
            return true;
        else
          return false
      }
    },
    created(){
      this.$store.state.telNumber&&(this.telNumber = this.$store.state.telNumber);
      this.keepTime();
   },
    methods:{
      keepTime(){
        this.timer = setInterval(()=>{
          if(this.clock === 0){
            clearInterval(this.timer);
          }
          else{
            this.clock--;
          }
        },1000)
      },
      nextFn(){
        let _this = this;
        this.iptCode||(this.messageShow = true);
        //验证码输入正确发送请求
        if(this.iptCom){
          this.$http.put('/api/user',{
            validCode:_this.iptCode,
            password:_this.iptPas
          },
          {
            withCredentials:true,
          }).then((req)=>{
            if(req.data.code===1){
              this.cancelText = req.data.msg;
              this.messageTheme=1;
              this.messageShow = true;
              _this.$router.push({name:'ringUp'})
            }else {
              this.cancelText = req.data.msg;
              this.messageTheme=0;
              this.messageShow = true;
            }

          })
        }

      },
      //重发验证码
      retryFn(){
        let _this = this;
        this.codeActive = false;
        if(this.clock===0){
          this.$http.put('/api/user',{
            telNumber:_this.telNumber
          },
          {
            withCredentials:true,
          }).then((req)=>{
            if(req.data.code===1){
              this.code = req.data.data.testCode;
              this.cancelText = this.telNumber;
              this.messageTheme=1;
              this.messageShow = true;
              _this.clock = 19;
              _this.keepTime();
            }
          });
        }
      }
    }
  }
</script>

<style scoped>
  .register-header>img{
    float: left;
    width: 30px;
    margin-top: 20px;
  }
  .register-header>span{
    float: right;
    font-size: 34px;
    color: #2d2d2d;
  }
  .head-portrait{
    height: 200px;
    width: 100vw;
    text-align: center;
  }
  .head-portrait>img{
    width: 180px;
    height: 180px;
    /*border-radius: 50%;*/
    margin-top: 10px;
  }
  .user{
    width: 100vw;
    box-sizing: border-box;
    padding: 0 50px;
  }

  .userName{
    margin-top: 40px;
    width: 100%;
    line-height: 100px;
    text-align: center;
    font-size: 32px;
  }
  .pas{
    width: 100%;
    border-bottom: 1px solid #ccc;
    line-height: 100px;
  }
  .userName>span{
    font-size: 34px;
    color: #333333;
  }
  .China>img{
    width: 32px;
    margin-top: 5px;
    vertical-align: middle;
  }
  .China>span{
    font-size: 34px;
    color: #333333;
    vertical-align: middle;
  }
  input{
    border: none;
    outline: none;
    height: 99px;
    caret-color: #5f5f5f;
    font-size: 38px;
    color: #333333;
  }
  input::placeholder{
    color: #9a9a9a;
    font-size:36px;
  }
  .pas>input{
    width: 50%;
  }
  .enter-ipt{
    width: 100%;
    margin-top: 100px;
    text-align: center;
  }
  .enter-ipt>.active{
    background: linear-gradient(to left,#31e07c,#1cd245);
  }
  .enter-ipt>span{
    display: inline-block;
    width: 90%;
    height: 90px;
    line-height: 90px;
    background: #bcf3cf;
    color: #fff;
    font-size: 36px;
    border-radius: 50px;
  }
  .login{
    height: 110px;
    line-height: 110px;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .login>p{
    color: #bfbfbf;
    font-size: 30px;
  }
  .login>p>span{
    font-size: 30px;
    color: #4a90e1;
  }
  .clock{
    margin-top: 15px;
    float: right;
    display: inline-block;
    padding: 0 30px;
    height: 70px;
    line-height: 70px;
    border-radius: 35px;
    background: #dedede;
    vertical-align: middle;
    color: #838383;
    font-size:0;
  }
  .clock>span{
    font-size: 30px;
    vertical-align: middle;
  }
  .clock>div{
    font-size: 30px;
    display: inline-block;
   vertical-align: middle;

  }
 /* .clock>div>span{
    vertical-align: middle;
  }*/
  .active{
    background: #76d36d;
    color: #fff;
  }

</style>


